﻿<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="https://cdn.bootcss.com/angular.js/1.6.4/angular.min.js"></script>
	<meta charset="utf-8" />
</head>
<body ng-app="myApp">
    <div sideboxtitle="Links" >
        <ul>
            <li>First link</li>
            <li>Second link</li>
        </ul>
    </div>
    <div sideboxtitle="TagCloud" >
        <div class="tagcloud">
            <a href="">Graphics</a>
            <a href="">AngularJS</a>
            <a href="">D3</a>
            <a href="">Front-end</a>
            <a href="">Startup</a>
        </div>
    </div>
    <sidebox title="zhou"><div class="tagcloud">
    <a href="">Graphics</a>
    <a href="">AngularJS</a>
    <a href="">D3</a>
    <a href="">Front-end</a>
    <a href="">Startup</a>
</div></sidebox>
    <sidebox title="xiang"><ul>
    <li>First link</li>
    <li>Second link</li>
</ul></sidebox>

   <a link=""><div>nininini</div></a>
</body>
</html>
<script>
    var app=  angular.module('myApp', []);
    app.directive('sidebox', function () {
        return {
            restrict: 'EA',
            scope: {
                title: '@'
            },
            transclude: true,
            template: '<div  class="sidebox">\
<div class="content">\
<h2 class="header">{{ title }}</h2>\
<span class="content" ng-transclude>\
</span>\
</div>\
</div>'
        };
    });

    app.directive('link', function() {
        return {
            restrict: 'EA',
            transclude: true,
            controller:
            function($scope, $element, $transclude, $log) {
                $transclude(function(clone) {
                    var a = angular.element('<a>');
                    a.attr('href', clone.text());
                    a.text(clone.text());
                    $log.info("Created new a tag in link directive");
                    $element.append(a);
                });
            }
        };
    });

</script>